<!--
 * @Author: 晟松
 * @Date: 2021-12-05 16:47:48
 * @LastEditors: 晟松
 * @LastEditTime: 2022-02-26 19:53:07
 * @FilePath: \volunteer-vue3-admin\src\views\schoolPages\StudentReview.vue
 * @Description: 学生审核页面
-->

<template>
    <div>
        <div class="head">
            <el-row align="middle" justify="start" :gutter="20" class="row">
                <el-col :span="7" class="title">用户名称</el-col>
                <el-col :span="16">
                    <el-input v-model="nameInput" placeholder="请输入用户名称" clearable />
                </el-col>
            </el-row>
            <el-row align="middle" justify="start" :gutter="20" class="row">
                <el-col :span="7" class="title">手机号码</el-col>
                <el-col :span="16">
                    <el-input v-model="phoneInput" placeholder="请输入用户手机号码" clearable />
                </el-col>
            </el-row>
            <el-row align="middle" justify="start" :gutter="20" class="row">
                <el-col :span="7" class="title">用户状态</el-col>
                <el-col :span="16">
                    <el-select v-model="available" class="m-2" placeholder="用户状态" size="large" clearable>
                        <el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value"></el-option>
                    </el-select>
                </el-col>
            </el-row>
            <el-row align="middle" justify="start" :gutter="20" class="row">
                <el-col :span="20">
                    <el-button type="primary" size="small" @click="serach">搜索</el-button>
                    <el-button type="info" size="small" @click="reset">重置</el-button>
                </el-col>
            </el-row>

            <el-row :gutter="10" class="allBtn">
                <el-col :span="1.1">
                    <el-button type="success" plain icon="delete" size="mini" @click="handleReview" :disabled="delDisable">审核通过</el-button>
                </el-col>
            </el-row>
        </div>
        <div class="show">
            <el-table :data="data.showList" style="width: 100%" stripe @selection-change="handleSelectionChange">
                <el-table-column type="selection" width="55" />
                <el-table-column label="id">
                    <template #default="scope">{{ scope.row.id }}</template>
                </el-table-column>
                <el-table-column property="userName" label="姓名" />
                <el-table-column property="gender" label="性别" :formatter="genderTrans" />
                <el-table-column property="phone" label="手机号" align="center" width="150" />
                <el-table-column property="college" label="学院" show-overflow-tooltip width="150" />
                <el-table-column property="major" label="专业" />
                <el-table-column property="grade" label="年级" :formatter="gradeTrans" />
                <el-table-column property="studentId" label="学号" width="150" align="center" />
                <el-table-column property="introduction" label="个人介绍" width="150" align="center" show-overflow-tooltip />
                <el-table-column property="createdAt" label="创建时间" width="200" align="center" />

                <el-table-column label="状态">
                    <template #default="scope">
                        <el-switch v-model="scope.row.available" @change="(val) => switchAvailable(val, scope.row)" />
                    </template>
                </el-table-column>
            </el-table>
            <div class="demo-pagination-block" :style="{ float: 'right', marginTop: '10px' }">
                <el-pagination
                    :page-size="20"
                    :small="false"
                    :disabled="false"
                    :background="true"
                    layout="total, prev, pager, next"
                    :total="data.showList.length"
                    @size-change="handleSizeChange"
                    @current-change="handleCurrentChange"
                ></el-pagination>
            </div>
        </div>
    </div>
</template>

<script setup>
import { getAllResident } from "@/myApi/community";
import {
    getAllStudent,
    getAllCollegeStudent,
    getAllCollegeAdmin,
    searchAllCollegeStudent,
    searchAllStudent,
    collegeReview,
} from "@/myApi/school";
import { getCollegeAllStudentVol, getAllResidentVol } from "@/myApi/vol";
import { getAllSchool, getAllCommunity, create, deleteUser, update, updatePwd } from "../../myApi/user";
import { localFile } from '@/myApi/upload'
import { reactive, ref, computed, onBeforeMount, onMounted, watchEffect } from "vue";
import { useRouter } from "vue-router";
import { useStore } from "vuex";
import enums from "@/utils/enums";
import { batchRegisterStudent } from "../../myApi/school";
import { ElMessage } from 'element-plus'


let mine = reactive({ student: { name: "蒋晟松" } });

const store = useStore();
const router = useRouter();
let identity = computed(() => store.getters.identity);
// console.log("identity: ", identity.value);
let userAdmin = computed(() => store.getters.user);
let schoolAdmin = computed(() => store.getters.schoolAdmin);

let nameInput = ref("");
let phoneInput = ref("");
let available = ref(undefined);
let options = [
    {
        value: true,
        label: "正常",
    },
    {
        value: false,
        label: "停用",
    },
];

// 在table中转换一下性别为中文
const genderTrans = (row, column, cellValue, index) => {
    if (cellValue == 'male') {
        return '男'
    } else if (cellValue == 'female') {
        return '女'
    } else {
        return '无'
    }
}
// 转换一下年级
const gradeTrans = (row, column, cellValue, index) => {
    let res = ''
    switch (cellValue) {
        case 1: {
            res = '大一'
            break
        }
        case 2: {
            res = '大二'
            break
        } case 3: {
            res = '大三'
            break
        } case 4: {
            res = '大四'
            break
        } case 8: {
            res = '其他'
            break
        }
    }
    return res
}
// 存储所有数据的对象
let data = reactive({ allStudent: [], showList: [] });
let limitOffset = reactive({ limit: 10, offset: 0 });
onMounted(async () => {
    await init()
});
/**
 * @description: 初始化table所需的数据
 * @param {*}
 * @return {*}
 */
async function init() {
    if (schoolAdmin.value) {
        data.allStudent = await searchAllStudent({
            id: userAdmin.value.id,
            available: false
        });
    } else {
        data.allStudent = await searchAllCollegeStudent({
            id: userAdmin.value.id,
            available: false
        });
    }
    console.log("data.allStudent: ", data.allStudent.data);
    data.showList = data.allStudent.data
}

const serach = async () => {
    // console.log(nameInput.value, phoneInput.value, available.value);
    // 注意数据格式
    let params = {
        id: userAdmin.value.id,
        userName: nameInput.value,
        phone: phoneInput.value,
        available: available.value
    }
    let res = {}
    if (schoolAdmin.value) {
        res = await searchAllStudent(params);
    } else {
        res = await searchAllCollegeStudent(params);
    }
    data.showList = res.data
    console.log('data.showList: ', data.showList);
}

const reset = () => {
    nameInput.value = ''
    phoneInput.value = ''
    available.value = undefined
}

// 修改学生的可用状态
const switchAvailable = async (val, stu) => {
    console.log('val,stu: ', val, stu);
    let res = await update({ id: stu.id, identity: stu.identity, available: val })
    console.log('res: ', res);
}

const multipleSelection = ref([])
/**
 * @description: 处理多行的多选
 * @param {*} val
 * @return {*}
 */
const handleSelectionChange = (val) => {
    console.log('handleSelectionChange val: ', val);
    multipleSelection.value = val
}


// 根据是否多选了进行判断是否可删除
let delDisable = computed(() => {
    if (multipleSelection.value.length > 0) return false
    else return true
})
const handleReview = async () => {
    console.log('handleReview: ', multipleSelection.value);
    for (let i = 0; i < multipleSelection.value.length; i++) {
        let { id, identity } = multipleSelection.value[i]
        let res = await collegeReview({ id })
    }
    await init()
}


// 分页所需的东西
const handleSizeChange = (val) => {
    console.log(`${val} items per page`)
}
const handleCurrentChange = (val) => {
    console.log(`current page: ${val}`)
}

</script >

<style lang="scss" scoped>
.head {
    display: flex;
    // justify-content: space-around;
    flex-wrap: wrap;
    .allBtn {
        margin: 10px;
    }
    .row {
        margin: 0 10px;
        min-width: 20vw;
        .title {
            font-size: 0.9rem;
            font-weight: bold;
        }
    }
}
.show {
    .optionBtn {
    }
}
</style>
